<template>
  <div class="snow-page">
    <div class="snow-inner-page">
      <a-form :model="formData.form" :label-col-props="{ span: 5 }" :wrapper-col-props="{ span: 18 }" ref="formRef">
        <a-row :gutter="16">
          <a-col :span="6">
            <a-form-item field="name" label="用户名">
              <a-input v-model="formData.form.name" placeholder="用户名" allow-clear />
            </a-form-item>
          </a-col>
          <a-col :span="10">
            <a-form-item label="时间">
              <a-range-picker v-model="timeRange" show-time :time-picker-props="{
                defaultValue: ['00:00:00', '00:00:00']
              }" :shortcuts="[
                {
                  label: '7天',
                  value: () => [dayjs(), dayjs().add(1, 'week')],
                },
                {
                  label: '一个月',
                  value: () => [dayjs(), dayjs().add(1, 'month')],
                },
                {
                  label: '1年',
                  value: () => [dayjs(), dayjs().add(1, 'year')],
                },
              ]" @change="onChange"></a-range-picker>
            </a-form-item>
          </a-col>

          <a-col :span="6">
            <a-space>
              <a-button type="primary" @click="onSearch">
                <template #icon>
                  <icon-search />
                </template>
                <template #default>查询</template>
              </a-button>
              <a-button @click="onReset">
                <template #icon>
                  <icon-refresh />
                </template>
                <template #default>重置</template>
              </a-button>

            </a-space>
          </a-col>
        </a-row>
      </a-form>
      <a-table :data="tableData" row-key="id" size="small" bordered :pagination="false">
        <template #columns>
          <a-table-column title="用户名">
            <template #cell="{ record }">
              {{ record.name }}
            </template>
          </a-table-column>
          <a-table-column title="短信发送量">
            <template #cell="{ record }">

              {{ record.sms_num }}
            </template>
          </a-table-column>
          <a-table-column title="语言发送量">
            <template #cell="{ record }">
              {{ record.voice_num }}
            </template>
          </a-table-column>


          <a-table-column title="操作" align="center" fixed="right">
            <template #cell="{ record }">
              <a-space>
                <a-button size="mini" type="primary" @click="onDetal(record)">详情</a-button>

              </a-space>
            </template>
          </a-table-column>
        </template>
      </a-table>
      <a-pagination :total="total" style="margin-top:10px;" @change="changePage" />
    </div>


  </div>
</template>

<script setup lang="ts">
import { getstatisticListAPI } from "@/api/modules/statistic/index"
import router from "@/router";
import dayjs from 'dayjs';
import { onMounted } from "vue";

onMounted(() => {
  init();
});

const today = dayjs();
const last7Days = [];

for (let i = 0; i < 2; i++) {
  const date = today.subtract(i, 'day').format('YYYY-MM-DD HH:mm:ss');
  last7Days.push(date);
}

const timeRange = ref([last7Days[last7Days.length - 1], last7Days[0]])


function onChange(dateString) {
  console.log('onChange: ', dateString);
  formData.form.start_time = dateString[0]
  formData.form.end_time = dateString[1]
}


async function init() {
  let obj = {
    paged: formData.paged,
    pageSize: formData.pageSize
  }
  let res = await getstatisticListAPI(obj, formData.form);
  total.value = 0
  tableData.value = [];
  if (res.status == 2) {
    total.value = res.data.totalCount;
    tableData.value = res.data.data;
  }
}


function onDetal(val) {

  router.push({ path: "/system/fuwudetail", query: { userId: val.user_id } })

}
const total = ref(0)

const tableData = ref([]);
const formData = reactive({
  form: {
    name: "",
    end_time: timeRange.value[1],
    start_time: timeRange.value[0]
  },
  paged: 1,
  pageSize: 10
});

const formRef = ref();
const onReset = () => {
  formRef.value.resetFields();
  init();
};

function changePage(page) {

  formData.paged = page;
  init()
}

function onSearch() {
  init();
}


</script>

<style lang="scss">
.arco-modal-body {
  text-align: center !important;
}

::v-deep .arco-table-size-small .arco-table-thead .arco-table-cell {
  padding: 2px 16px !important;
  text-align: center !important;
}
</style>